<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>信息详情页面</title>

<link rel="stylesheet" type="text/css" href="../decss/base.css" />
<link rel="stylesheet" type="text/css" href="../decss/bootstrap-datepicker.css" />
<link rel="stylesheet" type="text/css" href="../decss/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../decss/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="../decss/main.css" />
<link href="../tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="../tablecloth/tablecloth.js"></script>
<script type="text/javascript" src="../Js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../Js/haidao.offcial.general.js"></script>
<script type="text/javascript" src="../Js/select.js"></script>
<script type="text/javascript" src="../Js/haidao.validate.js"></script>
<script src="../My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../Js/jquery-form.js"></script>
<script type="text/javascript" src="../Js/jsUtils.js"></script>
</head>
<meta name="decorator" content="default"/>

<body>
<!-- 右侧主体 -->
<div class="wrapper_content">
	<div class="user_recharge company_withdraw">	
		<ul class="nav nav-tabs">
			<li class="active" id="tx">
				<a href="#info_tab01" data-toggle="tab" onClick="info()">个人基础信息</a>
			</li>
			<li id="txjl">
				<a href="#info_tab02" data-toggle="tab" onClick="work()">工作信息</a>
			</li>
			<li id="txlx">
				<a href="#info_tab03" data-toggle="tab" onClick="contact()">紧急联系人</a>
			</li>
			<li id="txpic">
				<a href="#info_tab04" data-toggle="tab" onClick="pic()">相关认证</a>
			</li>
			<li id="txbank">
				<a href="#info_tab05" data-toggle="tab" onClick="bank()">银行卡信息</a>
			</li>
		</ul>
		<div class="tab-content">
			<div class="tab-pane fade in active" id="info_tab01">	
				<form id="form1" name="form1" class="form-horizontal user_recharge_form user_recharge_form02" onSubmit="return savaMSG();" role="form" action="<%=request.getContextPath()%>/user/personInfo.do" target="_blank">
			 		<div id="back_body">&nbsp;&nbsp;
			 		<table border="1">
						<c:forEach items="${list}" var="u">
						<tr style="white-space: nowrap;">		
						<tr>
						<th>用户编号：</th>
						<td align="left">${u.userNumber}</td>
						<th>登录账号：</th>
						<td align="left">${u.phoneNumber}</td>
						</tr>
						<tr>
						<th>身份证号：</th>
						<td align="left">${u.userIDCard}</td>
						<th>最高学历：</th>
						<td align="left">${u.educational}</td>
						</tr>
						<tr>
						<th>真实姓名：</th>
						<td align="left">${u.userName}</td>
						<th>微信号码：</th>
						<td align="left">无</td>
						</tr>
						<tr>
						<th>性 &nbsp;&nbsp;&nbsp;&nbsp;别：</th>
						<td align="left">${u.sex}</td>
						<th>QQ&nbsp;号码：</th>
						<td align="left">${u.QQNo}</td>
						</tr>
						<tr>
						<th>婚姻状况：</th>
						<td align="left">${u.marriage}</td>
						<th>现居省份：</th>
						<td align="left">${u.livingProvinces}</td>
						</tr>
						<tr>
						<th>出生日期：</th>
						<td align="left">${u.birDate}</td>
						<th>现居城市：</th>
						<td align="left">${u.livingCity}</td>
						</tr>
						<tr>
						<th>年 &nbsp;&nbsp;&nbsp;&nbsp;龄：</th>
						<td align="left">${u.age}</td>
						<th>详细地址：</th>
						<td align="left">${u.detailedAddress}</td>
						</tr>	
						</c:forEach>					
					</table>
					</div>
				</form>	
			</div>
		
			<div class="tab-pane fade" id="info_tab02">
				<form id="form1" name="form1" class="form-horizontal user_recharge_form user_recharge_form02" onSubmit="return savaMSG();" role="form" action="<%=request.getContextPath()%>/user/personInfo.do" target="_blank">
			 		<div id="back_body">&nbsp;&nbsp;
			 		<table border="1">
						<c:forEach items="${list}" var="u">
						<tr style="white-space: nowrap;">		
						<tr>
						<th>单位名称：</th>
						<td align="left">${u.companyName}</td>
						<th>单位所在省：</th>
						<td align="left">${u.companyProvinces}</td>
						</tr>
						<tr>
						<th>职&nbsp;&nbsp;业：</th>
						<td align="left">${u.occupation}</td>
						<th>单位所在市：</th>
						<td align="left">${u.companyCity}</td>
						</tr>
						<tr>
						<th>职&nbsp;&nbsp;称：</th>
						<td align="left">无</td>
						<th>单位电话：</th>
						<td align="left">${u.companyTelephone}</td>
						</tr>
						<tr>
						<th>月收入：</th>
						<td align="left">${u.monthIncome}</td>
						<th>单位详细地址：</th>
						<td align="left">${u.companyAddress}</td>
						</tr>
						<tr>
						<th>发薪日：</th>
						<td align="left">每月${u.salaryDay}号</td>
						</tr>	
						</c:forEach>					
					</table>
					</div>
				</form>	
			</div>
			
			<div class="tab-pane fade" id="info_tab03">
				<form id="form1" name="form1" class="form-horizontal user_recharge_form user_recharge_form02" onSubmit="return savaMSG();" role="form" action="<%=request.getContextPath()%>/user/personInfo.do"  target="_blank">
			 		<div id="back_body">&nbsp;&nbsp;
			 		<table border="1">
						<c:forEach items="${list}" var="u">
						<tr style="white-space: nowrap;">		
						<tr>
						<th>直系亲属：</th>
						<td align="left">${u.directRelatives}</td>
						<th>同事朋友：</th>
						<td align="left">${u.friendColleague}</td>
						</tr>
						<tr>
						<th>直系亲属姓名：</th>
						<td align="left">${u.RelativesName}</td>
						<th>朋友同事姓名：</th>
						<td align="left">${u.friendName}</td>
						</tr>
						<tr>
						<th>直系亲属手机号：</th>
						<td align="left">${u.RelativesPhoneNo}</td>
						<th>朋友同事手机号：</th>
						<td align="left">${u.friendPhoneNo}</td>
						</tr>	
						</c:forEach>					
					</table>
					</div>
				</form>	
			</div>
			
			<div class="tab-pane fade" id="info_tab04" >
				<form id="form1" name="form1" class="form-horizontal user_recharge_form user_recharge_form02" onSubmit="return savaMSG();" role="form" action="<%=request.getContextPath()%>/user/personInfo.do"  target="_blank" >
			 		<div id="back_body">&nbsp;&nbsp;
			 		<table border="1">
						<c:forEach items="${list}" var="u">
						<tr style="white-space: nowrap;">		
						<tr>
						<th>当前芝麻信用分：</th>
						<td align="left">${u.zimaFen}</td>
						<th>活体认证：</th>
						<td align="left">${u.idCardZ}</td>
						</tr>
						
						<tr>
						<th>认证手机号：</th>
						<td align="left">${u.phone}</td>
						<th>运营商认证：</th>
						<td align="left">${u.operator}</td>
						</tr>
						<tr>
						<th>手机运营商：</th>
						<td align="left">无</td>
						<th>手机归属地：</th>
						<td align="left">无</td>
						</tr>
						
						<tr>
						<th style="width:200px;">身份证正面：</th>
						<td align="left" style="width:450px;height:100px;"><img id="img1" onmouseover="bigger1()" onmouseout="smaller1()" src="http://img.51jinyinhua.com/${u.userIDCard}_6.png" style="cursor:pointer;width:120px;height:100px;" /></td>
						</tr>
						<tr>
						<th>身份证反面：</th>
						<td align="left"><img id="img2" onmouseover="bigger2()" onmouseout="smaller2()" src="http://img.51jinyinhua.com/${u.userIDCard}_7.png" style="cursor:pointer;width:120px;height:100px;" /></td>
						</tr>
						<tr>
						<th>活体照片：</th>
						<td align="left"><img id="img3" onmouseover="bigger3()" onmouseout="smaller3()" src="http://img.51jinyinhua.com/${u.userIDCard}_1.png" style="cursor:pointer;width:100px;height:100px;" /></td>
						</tr>
						</c:forEach>				
					</table>
					</div>
				</form>	
			</div>
			
			<div class="tab-pane fade" id="info_tab05" >
				<form id="form1" name="form1" class="form-horizontal user_recharge_form user_recharge_form02" onSubmit="return savaMSG();" role="form" action="<%=request.getContextPath()%>/user/personInfo.do"  target="_blank" >
			 		<div id="back_body">&nbsp;&nbsp;
			 		<c:forEach items="${list}" var="u">
			 		<table border="1">
			 		    <c:if test="${u.listmap=='' }">
					      <tr style="white-space: nowrap;">  
					      <tr>
					      <th>持卡人姓名：</th>
					      <td align="left">无</td>
					      <th>开户银行：</th>
					      <td align="left">无</td>
					      </tr>
					      <tr>
					      <th>银行账号：</th>
					      <td align="left">无</td>
					      <th>支行信息：</th>
					      <td align="left">无</td>
					      </tr>
					      <tr>
					      <th>代扣功能：</th>
					      <td align="left">无</td>
					      </tr> 
					      </c:if>     
			 		    <c:if test="${u.listmap!='' }">
						<c:forEach items="${u.listmap}" var="u">
						<tr style="white-space: nowrap;">		
						<tr>
						<th>持卡人姓名：</th>
						<td align="left">${u.cardholder}</td>
						<th>开户银行：</th>
						<td align="left">${u.bankName}</td>
						</tr>
						<tr>
						<th>银行账号：</th>
						<td align="left">${u.bankCard}</td>
						<th>支行信息：</th>
						<td align="left">无</td>
						</tr>
						<tr>
						<th>代扣功能：</th>
						<td align="left">${u.binding}</td>
						</tr>	
						</c:forEach>	
						</c:if>  				
					</table>
					</c:forEach>
					</div>
				</form>	
			</div>
			
		</div>
	</div>
</div>
<!-- end 总览 -->

<script>
/**
 * 图片放大
 */
 var img = document.getElementById('img1');
 var img = document.getElementById('img2');
 var img = document.getElementById('img3');
 function bigger1(){
  img1.style.width = '400px';
  img1.style.height = '300px';
 }
 function bigger2(){
  img2.style.width = '400px';
  img2.style.height = '300px';
 }
 function bigger3(){
  img3.style.width = '400px';
  img3.style.height = '400px';
 }
 
 function smaller1(){
  img1.style.width = '120px';
  img1.style.height = '100px';
 }
 function smaller2(){
  img2.style.width = '120px';
  img2.style.height = '100px';

 }
 function smaller3(){
  img3.style.width = '100px';
  img3.style.height = '100px';
 }
/**
 * 显示遮挡层
 */
function info() {
	$("#tx").addClass("active");
	$("#txjl").removeClass();
	$("#txlx").removeClass();
	$("#txpic").removeClass();
	$("#txbank").removeClass();
	$("#info_tab01").addClass("in active"); 
	$("#info_tab02").removeClass("in active");
	$("#info_tab03").removeClass("in active");
	$("#info_tab04").removeClass("in active");
	$("#info_tab05").removeClass("in active");
}
function work() {
	$("#tx").removeClass();
	$("#txjl").addClass("active");
	$("#txlx").removeClass();
	$("#txpic").removeClass();
	$("#txbank").removeClass();
	$("#info_tab01").removeClass("in active");
	$("#info_tab02").addClass("in active"); 
	$("#info_tab03").removeClass("in active");
	$("#info_tab04").removeClass("in active");
	$("#info_tab05").removeClass("in active");
}
function contact() {
	$("#tx").removeClass();
	$("#txjl").removeClass();
	$("#txlx").addClass("active");
	$("#txpic").removeClass();
	$("#txbank").removeClass();
	$("#info_tab01").removeClass("in active");
	$("#info_tab02").removeClass("in active");
	$("#info_tab03").addClass("in active");
	$("#info_tab04").removeClass("in active");
	$("#info_tab05").removeClass("in active");
}
function pic() {
	$("#tx").removeClass();
	$("#txjl").removeClass();
	$("#txlx").removeClass();
	$("#txpic").addClass("active");
	$("#txbank").removeClass();
	$("#info_tab01").removeClass("in active");
	$("#info_tab02").removeClass("in active");
	$("#info_tab03").removeClass("in active");
	$("#info_tab04").addClass("in active"); 
	$("#info_tab05").removeClass("in active"); 
}
function bank() {
	$("#tx").removeClass();
	$("#txjl").removeClass();
	$("#txlx").removeClass();
	$("#txpic").removeClass();
	$("#txbank").addClass("active");
	$("#info_tab01").removeClass("in active");
	$("#info_tab02").removeClass("in active");
	$("#info_tab03").removeClass("in active");
	$("#info_tab04").removeClass("in active");
	$("#info_tab05").addClass("in active"); 
}


</script>

</body>
</html>
 